iT邦幫忙

2024 iThome 鐵人賽

DAY 17
0
Modern Web

初學者入門 - 有人叫我寫blog那就來做吧!系列 第 17

[day-16] - 來看看別人的blog設計

  • 分享至 

  • xImage
  •  

這邊只是從網路上隨機舉例,用於分享設計的概念

專案連結:https://github.com/saicaca/fuwari/
https://ithelp.ithome.com.tw/upload/images/20241001/20141278lZOjFm9Yge.png

從這個Demo中可以看到
這是一個以藍色作為主色調的頁面(亦可自訂主題),相關的UI組件都是採用同個系列顏色做變化並且很明顯採用圓角設計搭配漸變動畫做切換,採用類似混合渲染的概念,將已經產生出來的靜態頁面一部份的內容採用動態載入、往後對內容更新而不用重新載入整個網頁。

由上到下分別有導覽列NavBar、主視覺圖、貼文與內容呈現區塊,並且由左到右分別為大頭照與作者說明、與貼文列表,每個標題都有引導線在左方,而右手邊採用較為凸顯的大面積按鈕設計。

值得一提的是,我觀察到它的手機板頁面將原本的作者區塊放到了最下方。如果是我可能會更希望手機板首頁的部分可以隱藏這個區塊或將其放到第一區可能會更符合我的喜好。

不過,可能需要注意該網頁由於使用了一些動畫和載入必備資源,所以會根據不同的設備有不同的顯示效果,如果效能較差可能會造成體驗上的反效果。


上一篇
[day-15] - 淺談版面設計 - 神秘的設計工具
下一篇
[day-17] - 淺嚐網頁的滋味 - HTML簡介
系列文
初學者入門 - 有人叫我寫blog那就來做吧!30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言